/*
 * @Author: your name
 * @Date: 2021-05-09 13:52:29
 * @LastEditTime: 2021-05-30 13:31:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xiangpan-admin/src/components/form/index.tsx
 */
import React from 'react';
import Form, { FormInstance, FormProps } from 'antd/lib/form';
import { Button, Col, Row, Space } from 'antd';
import { IForm, IFormTypeEnum, SinoFormItem } from './formComponent';
import styled from 'styled-components';
import { observer } from 'mobx-react';
import { globalModel } from '@/pages/globalModel';

interface IProps extends FormProps {
  list: any[];
  labelwidth?: number;
  onValuesChange?: (value: any, allValues: any) => void;
  onSubmit: (values: any, form: any) => void;
}
const normFile = (e) => {
  console.log('Upload event:', e);

  if (Array.isArray(e)) {
    return e;
  }

  return e && e.fileList;
};

const SinoForm = (props: IProps) => {
  console.log(globalModel, 'model====');
  const [form] = Form.useForm();
  const { list, layout, onSubmit, ...otherProps } = props;
  const Item = (row: IForm) => {
    let valuePropName = 'value';
    if (row.type === IFormTypeEnum.Switch) {
      valuePropName = 'checked';
    } else if (row.type === IFormTypeEnum.Upload) {
      valuePropName = 'fileList';
    }
    return !row.permission ||
      globalModel.userInfo?.is_super === row.permission ? (
      <Form.Item
        label={row.label}
        name={row.key}
        key={row.key}
        rules={row.rules}
        valuePropName={valuePropName}
        initialValue={row.initValue}
        {...(row.type === IFormTypeEnum.Upload && {
          getValueFromEvent: normFile,
        })}
      >
        {SinoFormItem(row, form)}
      </Form.Item>
    ) : null;
  };

  return (
    <FormStyle
      form={form}
      layout={layout || 'inline'}
      {...otherProps}
      onValuesChange={props.onValuesChange}
      onFinish={(values: unknown) => onSubmit(values, form)}
    >
      {props.list?.map((row: IForm, index: number) => {
        if (row.arrFormItem && row.arrFormItem?.length > 0) {
          return (
            <Form.Item label={row.label} style={{ display: 'flex' }}>
              <Row gutter={8}>
                {row.arrFormItem?.map((r: IForm, i: number) => {
                  return <Col span={r.col}>{Item(r)}</Col>;
                })}
              </Row>
            </Form.Item>
          );
        } else {
          return Item(row);
        }
      })}
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <Button htmlType="reset" onClick={() => form.resetFields()}>
            重置
          </Button>
        </Space>
      </Form.Item>
    </FormStyle>
  );
};
export default SinoForm;

export const FormStyle = styled(Form)<{ labelwidth?: number }>`
  .ant-form-item-label {
    width: ${(props) => props.labelwidth && props.labelwidth + 'px'};
  }
  .ant-space {
    margin-left: ${(props) => props.labelwidth && props.labelwidth + 'px'};
  }
`;
